/* 设置背景颜色和全局字体 */
.root {
    -fx-background-color: #f5f7fa;
    -fx-font-family: "Microsoft YaHei", "Arial", sans-serif;
    -fx-font-size: 14px;
}

/* 菜单栏样式 */
.menu-bar {
    -fx-background-color: #a2a5a8;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 0;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0, 0, 2);
    -fx-border-color: #979b9f;
    -fx-border-width: 0 0 1px 0;
}

.menu-bar .menu {
    -fx-background-color: transparent;
    -fx-text-fill: white;
    -fx-padding: 8px 15px;
    -fx-cursor: hand;
}

.menu-bar .menu:hover {
    -fx-background-color: #34495e;
}

.menu-bar .menu:showing {
    -fx-background-color: #34495e;
}

.menu-bar .menu-item {
    -fx-background-color: white;
    -fx-text-fill: #2c3e50;
    -fx-padding: 8px 15px;
    -fx-cursor: hand;
}

.menu-bar .menu-item:hover {
    -fx-background-color: #f0f2f5;
    -fx-text-fill: #3498db;
}

.menu-bar .menu-item:armed {
    -fx-background-color: #e3f2fd;
    -fx-text-fill: #3498db;
}

.menu-bar .menu-item .graphic {
    -fx-padding: 0 8px 0 0;
}

.menu-bar .menu-item .label {
    -fx-text-fill: inherit;
}

.menu-bar .menu-item:focused {
    -fx-background-color: #e3f2fd;
    -fx-text-fill: #3498db;
}

.menu-bar .separator:horizontal {
    -fx-background-color: #e0e0e0;
    -fx-padding: 0 5px;
}

.menu-bar .context-menu {
    -fx-background-color: white;
    -fx-background-radius: 6px;
    -fx-border-radius: 6px;
    -fx-border-color: #e0e0e0;
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 5, 0, 0, 1);
    -fx-padding: 5px;
}

/* 左侧导航栏 */
.side-nav {
    -fx-background-color: #ffffff;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 3, 0, 0, 1);
    -fx-min-width: 180px;
    -fx-max-width: 180px;
}

.nav-button {
    -fx-background-color: transparent;
    -fx-text-fill: #2c3e50;
    -fx-font-size: 14px;
    -fx-pref-width: 140px;
    -fx-pref-height: 40px;
    -fx-alignment: center-left;
    -fx-padding: 10px 15px;
    -fx-border-radius: 6px;
    -fx-background-radius: 6px;
    -fx-cursor: hand;
}

.nav-button:hover {
    -fx-background-color: #f0f2f5;
    -fx-text-fill: #3498db;
}

.selected {
    -fx-background-color: #e3f2fd;
    -fx-text-fill: #3498db;
    -fx-font-weight: bold;
}

/* 内容区域 */
.content-area {
    -fx-background-color: #ffffff;
    -fx-spacing: 20px;
    -fx-padding: 30px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 3, 0, 0, 1);
}

.section-header {
    -fx-font-size: 22px;
    -fx-font-weight: bold;
    -fx-text-fill: #2c3e50;
    -fx-padding: 0 0 15px 0;
}

.help-titled-pane {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-padding: 10px;
}

.help-titled-pane .title {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
}

.info-box {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-padding: 15px;
    -fx-spacing: 10px;
}

.info-box Label {
    -fx-font-size: 14px;
    -fx-text-fill: #2c3e50;
}

.tutorial-step {
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-text-fill: #2c3e50;
    -fx-padding: 8px 0;
}

.tutorial-description {
    -fx-font-size: 14px;
    -fx-text-fill: #34495e;
    -fx-padding: 0 0 15px 25px;
    -fx-line-spacing: 5px;
}

.important-note {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: #e74c3c;
    -fx-padding: 15px 0;
}

.note-content {
    -fx-font-size: 14px;
    -fx-text-fill: #34495e;
    -fx-padding: 0 0 15px 25px;
}

.image-container {
    -fx-padding: 15px;
    -fx-background-color: white;
    -fx-border-color: #e0e0e0;
    -fx-border-radius: 6px;
    -fx-background-radius: 6px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 3, 0, 0, 1);
    -fx-max-width: 1000px;
}

.image-container ImageView {
    -fx-fit-width: 1000px;
    -fx-preserve-ratio: true;
}

/* 滚动区域样式 */
.scroll-pane {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-padding: 0;
    -fx-fit-to-width: true;
    -fx-fit-to-height: true;
}

.scroll-pane .viewport {
    -fx-background-color: transparent;
}

.scroll-pane .scroll-bar:vertical {
    -fx-background-color: transparent;
    -fx-pref-width: 12px;
}

.scroll-pane .scroll-bar:vertical .track {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.scroll-pane .scroll-bar:vertical .thumb {
    -fx-background-color: #bdc3c7;
    -fx-background-radius: 6px;
}

.scroll-pane .scroll-bar:vertical .thumb:hover {
    -fx-background-color: #95a5a6;
}

/* 内容容器 */
.content-container {
    -fx-spacing: 25px;
    -fx-padding: 0 50px;
    -fx-alignment: top-center;
}

/* 教程步骤容器 */
.tutorial-container {
    -fx-spacing: 15px;
    -fx-padding: 0 20px;
    -fx-max-width: 1000px;
}